/**
 * 创建日期:2017/11/23 10:14
 * 创建作者:ewjx
 * 修改日期:2017/11/23 10:14
 * 备注信息:文章列表
 */
import {PostedList} from '../component/posted-list';

export class ArticleList {

    /**
     * this.data 节点数据
     * this.index 索引
     */
    constructor() {
        this.data = PostedList;
        this.index = '';
        /**
         * 点击回复或收起回复
         * @param index 索引
         */
        window.isShowContent = (index) => {
            this.isShowContentMethod(index);
        };
        // 添加回复内容
        window.toRespondent = () => {
            this.toRespondentMethod();
        }
    }

    /**
     * 获取回复列表
     */
    toElement() {
        let element = `
            <div class="posted-list-right">
            <ul class="${window.location.hash.replace('#/', '')}-content article-list">
                <li class="title">${this.data.title}</li>`,
            children = '';
        this.data.children.forEach((obj, index) => {
            let value = {};
            Object.assign(value, obj);
            if (!value.hasOwnProperty('isShow')) {
                value.isShow = false;
            }
            const listContent = this.childrenUl(value, index);
            children = listContent.el;
            /* BUG  TMD
            if (value.children && value.children.length > 0 && !value.isShow) {
                show = '收起回复';
            }*/
            element += `<li class="last-li">
                <div class="top-menu">
                    <span class="left-menu">${value.respondent}</span>
                    <span class="content">${value.content}</span><br>
                    <span onclick='isShowContent(${index})' 
                        class="on-reply reply">${listContent.show}</span>
                    <span class="create-time">${value.create_time}</span>
                    <span class="floor">${index + 1}楼</span><br>
                </div>
                ${children}
            </li>`;
        });
        return element += '</ul></div>';
    };

    /**
     * 添加回复内容方法
     */
    toRespondentMethod() {
        let element = '',
            findData = this.data.children[this.index];
        findData.children.push({
            respondent: '回复者',
            content: 'asdadas',
            create_time: '2017-11-23',
        });
        findData.children.forEach((val) => {
            element += this.listComment(val, '');
        });
        $(`#children-${this.index + 1}`).inner(element);
    }

    /**
     * 点击回复或收起回复
     * @param index 索引
     */
    isShowContentMethod(index) {
        this.index = index;
        let name = 'children',
            findData = this.data.children[index];
        findData.isShow = !findData.isShow;
        if (!findData.isShow && (findData.children && findData.children.length > 0)) {
            name += ' select-class';
        } else if (findData.isShow && findData.children && findData.children.length === 0) {
            name += ' select-class';
        }
        $(`#children-${index+1}`).attr('class', name);
        $(`#children-${index+1}`).inner(this.childrenUl(findData).el);
    }

    /**
     * 回复信息
     * @param value 节点的children属性
     * @param index 索引
     */
    childrenUl(value, index) {
        let element = `<ul class='children' id='children-${index + 1}'>`,
            show = '回复',
            iSay = '';
        console.log(value);
        if (value.children && value.children.length > 0 && !value.isShow) {
            iSay = '<button class="i-say">我也要说</button>';
            show = '收起回复';
            value.children.forEach((val) => {
                let hasComment = '';
                if (val.comment) {
                    hasComment = `回复<span class="font-color">${val.comment}</span>`
                }
                element += this.listComment(val, hasComment);
            });
        } else if (value.children && value.children.length === 0 && value.isShow) {
            value.isShow = false;
            show = '收起回复';
            element += `<li class="children-li">
                <textarea placeholder="请输入回复内容..."></textarea>
                <button onclick="toRespondent()">回复</button>
            </li>`;
        }
        return {el: element += `${iSay}</ul>`,
            show: show};
    }

    /**
     * list 遍历回复的数据
     * @param val 要显示的数据
     * @param hasComment 是否有回复别人
     */
    listComment(val, hasComment) {
        return `
        <li class="children-li">
            <span class="children-respondent">
                <span class="font-color">${val.respondent}</span>
                ${hasComment}:
            </span>
            <span class="children-content">${val.content}</span><br>
            <span class="reply">回复</span>
            <span class="children-create-time">${val.create_time}</span>
        </li>`;
    }
}
